/*
 * @Author: wujiedong
 * @Date: 2021-08-20 09:29:17
 * @LastEditTime: 2021-08-20 10:01:46
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \common-vue\src\kRouter\index.js
 */
/*
Vue开发插件:https://cn.vuejs.org/v2/guide/plugins.html
自定义router插件
1)

*/
let mVue // 将Vue构造函数保存到这里,便于代码解耦
class mVueRouter {
  constructor(options) {
    this.$options = options
    const initCurrent = window.location.hash.slice(1) || '/'
    mVue.util.defineReactive(this, 'current', initCurrent) // current属性变成响应式数据,vue官方提供的一个工具方法
    // 页面点击链接,事件执行导致current有变化,current由于是响应式的,current变化了,router-view中render依赖了current,它也会变化
    window.addEventListener('hashchange', () => {
      this.current = window.location.hash.slice(1)
      console.log('current', this.current)
    })
    console.log('mVueRouter 1') // 执行顺序2:router.js中使用Vue.use(KRouter)之后,对mVueRouter实例化,这里第二次执行
  }
}

mVueRouter.install = function(Vue) {
  mVue = Vue
  console.log(mVue)
  console.log('mVueRouter 3') // 执行顺序1:在router.js中使用Vue.use(KRouter)之后,第一时间调用install方法,这里mVueRouter 3是第一个执行
  // 1)挂载$router属性
  // 全局混入,所有组件创建之前都会先调用beforeCreate中逻辑
  // 作用:延迟$router的挂载,当newVue中有参数router,才进行挂载
  // 因为Vue.use(VueRouter)是第一个执行,这个时候还没有new VueRouter实例,所有这里使用混入,延迟挂载
  Vue.mixin({
    beforeCreate () {
      if (this.$options.router) {
        console.log('mVueRouter 2') // 执行顺序3:这里是最后执行,只有等mVueRouter实例化之后,配合main.js中传入的router对象,才能获取router实例化对象
        Vue.prototype.$router = this.$options.router
      }
    }
  })
  // 2) 注册router-view和router-link组件
  Vue.component('router-view', {
    render (h) {
      let component = null
      const { current, $options: { routes } } = this.$router
      const route = routes.find(item => item.path === current)
      if (route.component) {
        component = route.component
      }
      return h(component)
      // return h('div', 'aaa')
    }
  })
  Vue.component('router-link', {
    props: {
      to: {
        type: String,
        require: true
      }
    },
    render (h) {
      return h('a', { attrs: { href: '#' + this.to } }, this.$slots.default)
    }
  })
}

export default mVueRouter
